<!-- 种类单个 组件 -->

<template>
  <div class="types-item" @click="toList" :class="itemClass">
    <img :src="ico">
    <span>{{ txt }}</span>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {}
  },
  props: {
    ico: {
      type: String,
      default: ''
    },
    txt: {
      type: String,
      default: ''
    },
    space: {
      type: Number,
      default: 4
    }
  },
  watch: {},
  computed: {
    // 动态添加 'one' 'tow' 'three'
    itemClass () {
      let result = ''
      switch (this.space) {
        case 1:
          result = 'one'
          break
        case 2:
          result = 'two'
          break
        case 3:
          result = 'three'
          break
        default:
          result = ''
          break
      }

      return result
    }
  },
  methods: {
    toList () {
      this.$emit('toList')
    }
  },
  filters: {},
  created () {},
  mounted () {},
  destroyed () {}
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/const.scss';
@import '~@/assets/scss/mixin.scss';

.types-item {
  float: left;
  width: 25%;
  padding-top: 14px;
  &.one{
    width: 100%;
  }
  &.two{
    width: 50%;
  }
  &.three{
    width: 33.3%;
    img {
      width: 50px;
    }
  }
  img {
    display: block;
    width: 40px;
    margin: 0 auto 12px;
  }
  span {
    display: block;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #2f2f2f;
    @include ellipsis(1);
  }
}
</style>
